<template>
  <u-modal :show="showModal" @cancel="onClose" @confirm="onConfirm" title="修改密码" :showCancelButton="true">
    <view class="" style="width: 84%">
      <view class="edit-machine-form-item">
        <text class="edit-machine-form-item-label">登录名:</text>
        <u-input v-model="ruleForm.loginName" disabled :customStyle="{ border: 'solid 1rpx #dcdee2' }"></u-input>
      </view>
      <view class="edit-machine-form-item">
        <text class="edit-machine-form-item-label">姓名:</text>
        <u-input v-model="ruleForm.name" disabled :customStyle="{ border: 'solid 1rpx #dcdee2' }"></u-input>
      </view>
      <view class="edit-machine-form-item">
        <text class="edit-machine-form-item-label">密码:</text>
        <u-input v-model="ruleForm.password" type="password" :customStyle="{ border: 'solid 1rpx #dcdee2' }"></u-input>
      </view>
    </view>
  </u-modal>
</template>
<script>
  import {frameUserDetail, frameUserSave} from "../../api";
  import {tipBar} from "../../utils/jk-utils";

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      userId: {
        type: [Number, String],
        default: null
      }
    },
    data() {
      return {
        showModal: false,
        ruleForm: {
        }
      };
    },
    methods: {
      onClose() {
        this.ruleForm = {};
        this.$emit('close', false);
      },
      onConfirm() {
        if (this.ruleForm.loginName && this.ruleForm.name && this.ruleForm.password) {
          frameUserSave(this.ruleForm).then(res => {
            if (res.data.status === 200) {
              this.$emit('confirm');
            }
          })
        } else {
          tipBar('validator');
        }
      },
      getUserDetailRequest() {
        return frameUserDetail({ id: this.userId }).then(res => {
          if (res.data.status === 200) {
            this.ruleForm = JSON.parse(JSON.stringify(res.data.res));
            this.ruleForm.password = null;
          }
        })
      },
    },
    watch: {
      show(newVal) {
        this.showModal = newVal;
        if (newVal) {
          this.getUserDetailRequest();
        }
      }
    }
  }
</script>
<style scoped lang="scss">
.edit-machine-form-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20rpx;
  .edit-machine-form-item-label {
    font-size: 28rpx;
    color: #808695;
  }
}
</style>
